//引入样式
require('../css/commonCss/normalize.css')
require('../css/commonCss/reset.css')
require('../css/commonCss/property.css')
require('../css/commonCss/basic.less')
require('../fonts/iconfont.css')

require('../css/classTrain.less')
const { default: axios } = require('axios')
// 导入util js
const util = require('../util/util.js')

// 文档加载事件
document.addEventListener('DOMContentLoaded', function () {
  //0:获取元素
  const imgurl = document.querySelector('#imgurl') //课程图片
  const name = document.querySelector('#name') //课程名字
  const desc = document.querySelector('#desc') //课程内容
  const courseContent = document.querySelector('#course-list') //课程内容
  const subKinds = document.querySelector('.sub-kinds') //课程内容
  //1:底部导航
  util.fixBottomNav('sport');
  //2.运动导航
  util.sportTopNav('classTrain')
  //获取修改id
  
  //训练课程列表发送请求 获取所有课程数据
  axios.get("http://139.9.177.51:8099/sports/allcourse")
  .then(function(res){
      // console.log(res.data.data);
      let data = res.data.data;
      // 把后台数据处理成我们自己想要的数据
      let newCourse = data.filter(function(items){
        return items.latest == 1;
      });//最新课程
      let courseList = data.filter(function(items){
        return items.latest == 0;
      });//最新课程

      // console.log(newCourse);
      // console.log(courseList);

      // 先渲染最新课程
      imgurl.src = 'http://139.9.177.51:8099' + newCourse[0].imgurl;
      name.textContent = newCourse[0].name;
      desc.textContent = newCourse[0].desc;
      // 添加自定义属性
      subKinds.dataset['cid'] = newCourse[0].courseId;
      // console.log(newCourse[0].courseId);

      // 普通课程渲染
      /* let htmlStr = "";
      courseList.forEach(function(item){
        htmlStr += `
          <li>
            <img src="http://139.9.177.51:8099${item.imgurl}" alt="" width="100%" height="140px">
            <div class="train">
                <p class="text1" id="name">${item.name}</p>
                <p class="text2" id="desc">${item.desc}</p>
            </div>
          </li>
        `
      })
      courseContent.innerHTML = htmlStr; */

      // 普通渲染
      let arr = courseList.map(function(item){
        return `
          <li data-cid=${item.courseId}>
          <img src="http://139.9.177.51:8099${item.imgurl}" alt="" width="100%" height="140px">
          <div class="train">
              <p class="text1" id="name">${item.name}</p>
              <p class="text2" id="desc">${item.desc}</p>
          </div>
          </li>
        `
      })
    
      // console.log(arr.join(""));
      courseContent.innerHTML = arr.join("");

      // 最新课程添加点击事件 跳转到课程详情页面（AB页面传递参数）
      subKinds.addEventListener('click',function(){
        // 获取自定义属性
        let cid = this.dataset['cid']
        // console.log(cid);
        // 存储到会话存储中
        sessionStorage.cid = cid;
        // 跳转页面到课程详情页面
        location.href = './introduction.html'
      })

      // 普通课程添加点击事件 跳转到课程详情页面（AB页面传递参数） 利用事件委派
      courseContent.addEventListener('click',function(e){
        // 获取自定义属性的值 利用事件委派动态添加 closest向上查找li列表
        let cid = e.target.closest('li').dataset.cid;
        console.log(cid);
        // 存储到会话存储中
        sessionStorage.cid = cid;
        // 跳转页面到课程详情页面
        location.href = './introduction.html'
      })
  })
})